<template>
	<view>
		<NavBar text='每日住院清单' background='#fff' colors='#000' color='#000' />
		<view style="width: 100%; height: 120rpx;"></view>
		<view style="width: 100%; height: 350rpx; background-color: cornflowerblue; overflow: hidden; box-sizing: border-box; position: relative;">
			<view style="width: 70%; margin:0 auto; color: #fff; margin-top: 20rpx;">
				<view class="flx">
					<view class="flxAlign">
						<u-icon name="play-left-fill" size="28rpx" color="#fff"></u-icon>
					</view>
					
					<view class="flx1">
						<u-icon name="calendar" size="28rpx" color="#fff"></u-icon>
						<view style="margin-left: 10rpx;">{{date}}</view>
					</view>
					<view class="flxAlign">
						<u-icon name="play-right-fill" size="28rpx" color="#fff"></u-icon>
					</view>
				</view>
				
			</view>
			<view>
				<view style="width: 100%; text-align: center; font-size: 80rpx; font-weight: 600; color: #fff; letter-spacing: 1rpx; margin-top:30rpx;">1536.00</view>
				<view style="width: 100%; text-align: center; font-size: 25rpx; color: #fff; letter-spacing: 1rpx; margin-top: 10rpx;">今日总费用</view>
			</view>
			<view style="width:100%; position: absolute; border-top: 1rpx solid #fff; bottom: 0; height: 70rpx; line-height: 70rpx;">
				<view style="width: 90%; margin:0 auto; color: #fff; font-size: 25rpx;">
					<span>胸外科XS35135F16床</span>
					<span style="margin-left:20rpx;">|</span>
					<span style="margin-left:20rpx;">张三三</span>
				</view>
			</view>
		</view>
		<view>
			<view style="background-color: #fff; margin-top:30rpx;">
				<view class="flx" style="width: 90%; margin:0 auto;">
					<view style="font-size: 30rpx; line-height: 60rpx;">费用分类</view>
					<view style="font-size: 25rpx; line-height: 60rpx; color: #a5a5a5;">*实际产生费用以医院为准</view>
				</view>
			</view>
			<view v-for="(item,index) in Arrays" :key="index" style="background-color: #fff;">
				<view :style="{background:str.test(index) ? '#f5fafe' : '#fff'}" >
				<view class="flx" style="width: 90%; margin:0 auto;">
					<view style="font-size: 25rpx; line-height: 80rpx;">{{item.text}}</view>
					<view class="flx1">
						<view style="font-size: 25rpx; line-height: 80rpx;">{{item.number}}</view>
						<view class="flxAlign" style="margin-left: 10rpx;">
							<u-icon name="arrow-right" size="30rpx" color="#cecece"></u-icon>
						</view>
					</view>
				</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data(){
			return{
				date:'2023-05-01',
				str:/^\d*[02468]$/,
				Arrays:[
					{
						text:'床位费',
						number:256.20
					},
					{
						text:'中成药费',
						number:323.10
					},
					{
						text:'西药费',
						number:385.80
					},
					{
						text:'手术费',
						number:256.20
					},
					{
						text:'化验费',
						number:323.10
					},
					{
						text:'治疗费',
						number:385.80
					},
					{
						text:'检查费',
						number:158.80
					},
					{
						text:'护理费',
						number:258.00
					},
					{
						text:'诊断费',
						number:186.50
					}
				]
			}
		},
		onLoad(){
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
</style>